<@main.page title="新建发文">
<style>
.temp-list{ padding:0px; }
.temp-list li{ list-style:none; }

.gw-temp-item .title
{ color:red;text-align:center;}
.gw-temp-item .title2{ text-align:center; }
.gw-temp-item .docNumber{ text-align:center; }
.gw-temp-item .titleLine {width:90%;border-color:red;}

.preViewSmall .titleLine{margin-top:auto;margin-bottom:auto;}

.preViewBig .title{ letter-spacing:4px; font-size:36px }
.preViewBig .titleLine{ border-color:#F00; margin-left:47px; margin-top:50px }
.preViewBig .title2{ text-align:center; font-weight:bold; color:#000;font-weight:300;font-size:30px;margin:15px }
.preViewBig .content{  margin-left:100px; margin-top:50px; margin-right:40px; font-size:18px; letter-spacing:2px }
</style>
            <form >
            	<div class="form-body" >
                	<div class="row" >
                    	<div class="col-md-12" >
                        	<div class="row" >
                            	<div class="col-md-9" style="border:4px solid #f5f5f5">
                            		<#--模板Id 隐藏域-->
                            		<input type="hidden" name="tempId" />                            	
                                    <div class="form-group">
                                    	<input type="text" name="title" class="form-control" placeholder="请输入标题"
                                        	style="outline:0px none; border:0px none; font-size:22px; height:46px; 
                                            		line-height:46px;" onMouseMove="">
                                    </div>
                                    <div class="form-group">
                                    	<input type="text" disabled="true" name="docNumber" class="form-control" placeholder="请输入发文字号"
                                        	style="outline:0px none; border:0px none; font-size:16px; height:26px; 
                                            		line-height:26px;">
                                    </div>
                                    <hr style="margin:0px">
                                    <div class="form-group">
                                    	<textarea class="" id="editor1" name="content" rows="8"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                	<div class="row">
                                    	<div class="col-md-12">
                                        	<h4 ><strong>文档操作</strong></h4>
                                            <hr>
                                            <a href="#tempModal"  data-toggle="modal" class="btn btn-default" >选择模板</a>
										    <div class="modal fade" id="tempModal" tabindex="-1" role="basic" aria-hidden="true">
												<div class="modal-dialog">
													<div class="modal-content">
														<div class="modal-header">
															<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
															<h4 class="modal-title">选择模板</h4>
														</div>
														<div class="modal-body">
															<ul class="temp-list preViewSmall">
																<li class="active">
																	<div class="gw-temp-item" tempId="1">
																		<div class="temp-content" >
																			<p class="title">青岛董家口经济区管委安监中心</p>
																		</div>
																		<hr class="titleLine" />
																	</div>
																</li>
																<li class="">
																	<div class="gw-temp-item" tempId="2">
																		<div class="temp-content" >
																			<p class="title">青岛董家口经济区安委办公室</p>
																			<h5><center><b>会&nbsp;&nbsp;议&nbsp;&nbsp;纪&nbsp;&nbsp;要</b></center></h5>
																		</div>
																		<hr class="titleLine" />
																	</div>
																</li>
																<li class="">
																	<div class="gw-temp-item" tempId="3">
																		<div class="temp-content" >
																			<p class="title">青岛董家口经济区安委会文件</p>
																			<p class="docNumber">〔2015〕第  次</p>
																		</div>
																		<hr class="titleLine" />
																	</div>
																</li>
																
															</ul>
														</div>
														<div class="modal-footer">
															<button type="button" class="btn default" id="temp-pre" >上一个</button>
															<button type="button" class="btn default" id="temp-next" >下一个</button>
															<button type="button" class="btn blue" id="temp-selected" >选择</button>
														</div>
													</div>
													<!-- /.modal-content -->
												</div>
												<!-- /.modal-dialog -->
											</div>
										    
                                            <div class="form-group">
                                                <label class="control-label">发送到</label>
                                                <select id="select2_sample_modal_2" name="sendTo" class="form-control select2" multiple placeholder="请选择...">
                                                    <option>&nbsp;</option>    
                                                    <optgroup label="企业">
                                                        <option>全部</option>
                                                        <option>青岛海晶化工集团</option>
                                                        <option>澳斯顿新材料（青岛）有限公司</option>
                                                    </optgroup>
                                                    <optgroup label="管委会">
                                                        <option>全部</option>
                                                        <option>张三</option>
                                                        <option>李四</option>
                                                        <option>王五</option>
                                                    </optgroup>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">审批</label>
                                                <div class="radio-list">
                                                    <label class="radio-inline">
                                                        <input type="radio" name="NeedApprover" value="Y" checked>需要
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input type="radio" name="NeedApprover" value="N" >不需要
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group" id="wrap-approveSelect">
                                            	<label class="control-label">审批人</label>
                                            	 <select id="select-approve" name="Approver" class="form-control select2" multiple placeholder="请选择...">
                                                    <option>张三</option>    
                                                    <option>张三2</option>    
                                                    <option>张三3</option>    
                                                    <option>张三4</option>                                                        
                                                </select>
                                            </div>
                                            
                                            <div class="form-group">
                                                <a href="#responsive" class="btn green" data-toggle="modal" 
                                                	style=" padding-left:20px; padding-right:25px; margin-right:20px">
                                                    <i class="fa fa-search"></i> 预览</a>
                                                <button class="btn btn-default " style=" padding-left:20px; padding-right:25px">
                                                	<i class="fa fa-paper-plane"></i> 发送</button>   
                                            </div>
                                            <div class="form-group">
                                               <div id="temp-preview" class="preViewSmall gw-temp-item" >
                                            		
                                               </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>                        
                    </div>
                </div>
            </form>
            <div class="modal fade" id="responsive" tabindex="-1" role="responsive" aria-hidden="true">
            	<div class="modal-dialog modal-wide">
                	<div class="modal-content">
                    	<div class="modal-header">
                        	<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                            <h4 class="modal-title">公文预览</h4>
                        </div>
                        <div class="modal-body">
							<div class="row">
                            	<div id="temp-preview-content" class="col-md-12 preViewBig">
                                	<div class="gw-temp-item">
										<div class="temp-content"></div>
										<hr class="titleLine" />
										<p class="title2"></p>
										<div class="content"></div>
									</div>
                                </div>
                            </div>
						</div>
                        <div class="modal-footer">
							<button type="button" class="btn blue" data-dismiss="modal">关闭</button>
						</div>
                    </div>
                </div>
            </div>
 <!-- END PAGE LEVEL SCRIPTS -->
            <script type="text/javascript">
        		var editor=null;
            	$(document).ready(function(){
            		initSendTo();
            		initTemp();
            		
            		$('#responsive').on('show.bs.modal',function(e){
            			var tempHtml=$('#temp-preview .temp-content').html();
            			if(!$.trim(tempHtml)){
            				alert('请选择一个模板');;
            				return false;
            				}
            			var $tempPreviewModalContent=$('#temp-preview-content');
            			$tempPreviewModalContent.find('.temp-content').html(tempHtml);
            			
            			$tempPreviewModalContent.find('.title2').text($('input[name=title]').val());
            			$tempPreviewModalContent.find('.docNumber').text($('input[name=docNumber]').val());
            			$tempPreviewModalContent.find('.content').html(editor.getData());
            		});
            	});
                //
            	function initSendTo(){
            		$('#select2_sample_modal_2').select2();
            		$('#select-approve').select2();
            		
            		$('input[name=NeedApprover]').on('change',function(){
            			if(this.value=='Y'){
            				$('#wrap-approveSelect').show();            			
            			}else{
            				$('#wrap-approveSelect').hide();
            			}
            		});
            		 CKEDITOR.config.removePlugins='elementspath'; 
            		 editor=CKEDITOR.replace( 'editor1' );
            	}
               //
               function initTemp(){
            	   $('.temp-list li').hide();
            	   $('.temp-list .active').show();
            	   
            	   $('#temp-pre').on('click',function(){
            		  var currentLi=$('.temp-list').find('.active')
            		  if(currentLi.prev('li').length==0){ return; }
            		  $('.temp-list li').hide();
            		  currentLi.removeClass('active');
            		  currentLi.prev('li').show().addClass('active');
            	   });
            	   $('#temp-next').on('click',function(){
             		  var currentLi=$('.temp-list').find('.active');
             		  if(currentLi.next('li').length==0){ return; }
             		 $('.temp-list li').hide();
             		  currentLi.removeClass('active');
             		  currentLi.next('li').show().addClass('active');
            	   });
            	   $('#temp-selected').on('click',function(){
            		   var $temp=$('.temp-list').find('.active');
            		   if($temp.find('.docNumber').length==0){
            			   $('input[name=docNumber]').attr('disabled',true);
            		   }else{
            			   $('input[name=docNumber]').val($temp.find('.docNumber').html()).attr('disabled',false);
            		   }
            		   $('input[name=tempId]').val($temp.find('.gw-temp-item').attr('tempId'));
            		   $('#temp-preview').html($temp.html());
            		   $('#tempModal').modal('hide');
            		   
            	   });
               }
            </script>
</@main.page>